/*
 * author: downey
 * version: 1.0.0
 * git: http://git.kekuming.xin/downey/downey-canvas-charts.git
 */

export default class Base {

  /* 构造函数 */
  constructor(option = {}, parameter = {}) {
    const DEFAULTS = {
      ids: undefined,
      ctx: undefined,
      dom: undefined,
      clientWidth: undefined,
      clientHeight: undefined,
      width: undefined,
      height: undefined,
      center: ['50%', '50%'], // 左 上
      fontSize: 14,
      data: [],
      points: [],
      index: -1,
    };

    Object.assign(this, {...DEFAULTS, ...this.extend(parameter, option)});
    console.log(this);
    if (!this.ids && !this.dom) return console.error('canvas is not exits！');

    this.dom = this.dom || document.querySelector('#' + this.ids);

    if (!this.dom) return this;
    this.ctx = this.dom.getContext('2d');

    this.load();

    // TODO canvas画布尺寸动态改变

    // 监听窗口大小
    window.onresize = () => {
      return (() => {
        this.load();
      })()
    }
  }

  // 初始化
  load() {

    this.test();

    this.drawStart();

    this.setCenter();

    this.getGlobal();

    this.drawLogic();

    this.drawEnd();
  }

  // 绘制开始
  drawStart() {
    this.ctx.save();
  }

  // 绘制结束
  drawEnd() {
    this.ctx.restore();
  }

  // 清理画布
  drawClear() {
    this.ctx.clearRect(0, 0, this.dom.width, this.dom.height);
  }

  // 测试
  test() {
    // this.data.sort((a, b) => a > b);
  }

  // 计算保存全局变量
  getGlobal() {
  }

  // 绘制逻辑
  drawLogic() {
  }

  // 重绘
  drawReload() {
    if (!this.dom) return this;

    this.drawClear();
    this.load();
  }

  // 设置center位置
  setCenter() {
    this.dom.width = this.clientWidth || this.dom.clientWidth;
    this.dom.height = this.clientHeight || this.dom.clientHeight;

    this.width = this.getPx(this.width, this.dom.width) || this.dom.width;
    this.height = this.getPx(this.height, this.dom.height) || this.dom.height;

    // 测试区域大小
    // this.ctx.beginPath();
    // this.ctx.strokeStyle = '#fff';
    // this.ctx.strokeRect(1, 0, this.width - 1, this.height);
    // this.ctx.closePath();

    // 计算定位
    let px = 0, py = 0;
    if (this.center && this.center.length >= 1) px = this.getPx(this.center[0], this.width);
    if (this.center && this.center.length >= 2) py = this.getPx(this.center[1], this.height);
    // console.log('px, py', px, py);

    this.ctx.translate(px, py);

    return this;
  }

  // 获取像素
  getPx(val = 0, parent = 0, unit = '%') {
    if (val.toString().indexOf(unit) !== -1)
      val = parent * val.replace('%', '') / 100;
    return Number(val);
  }

  // 递归合并多层级对象
  extend(obj1 = {}, obj2 = {}) {
    // console.log(obj1 instanceof Object, obj2 instanceof Array);
    // console.log(obj1.constructor === Object, obj2.constructor === Array);
    for (let i in obj2) {
      try {
        if (obj2[i].constructor === Object) {
          obj1[i] = this.extend(obj1[i], obj2[i]);
        } else {
          obj1[i] = obj2[i];
        }

      } catch (e) {
        obj1[i] = obj2[i];
      }
    }
    return obj1;
  }

  // 求和
  getSum() {
    // this.data.sort((a, b) => a > b);
    let sum = 0;
    this.data.forEach(v => sum += v);
    return sum;
  }

  // 求最大的一个数进制为大整数
  getMax(data) {
    let t = [10], max = 0;
    data.forEach(v => {
      t = t.concat(v);
    });
    max = Math.max(...t).toString();
    return (Number(max[0]) + 1) * (10 ** (max.length - 1));
  }

  // 弹性颜色
  getColor(bgColor = undefined, gd = [0, 0, 0, 0]) {
    let color = 'rgba(' + Math.ceil(Math.random() * 254 + 1) + ',' + Math.ceil(Math.random() * 254 + 1) + ',' + Math.ceil(Math.random() * 254 + 1) + ',1)';
    if (typeof bgColor === 'object' && bgColor.length > 0) {
      let grd;
      if (gd.length <= 4) {
        grd = this.ctx.createLinearGradient(...gd);
      } else if (gd.length > 4) {
        grd = this.ctx.createRadialGradient(...gd);
      }
      bgColor.forEach(({offset, color}) => {
        grd.addColorStop(offset, color);
      });
      color = grd;
      // this.ctx.fillStyle = 'blue';
      // this.ctx.fillRect(- r, - r, r * 2, r * 2);
    } else if (typeof bgColor === 'string') {
      color = bgColor;
    }
    return color;
  }

  // 数组弹性颜色
  getTypeColor(color = '', i = 0) {
    if (color instanceof Array) {
      if (color.length > 0 && i <= color.length) {
        return color[i];
      } else {
        return undefined;
      }
    }
    return color;
  }

  // 弹性字体
  setFont(color = undefined, textAlign = 'left', size = 16) {
    this.ctx.font = size + 'px "微软雅黑"';
    this.ctx.fillStyle = this.getColor(color);
    this.ctx.textAlign = textAlign;
  }

  // 判断象限
  getQuadrant(x = 0, y = 0) {
    // console.log('x,y', x, y);
    if (x === 0 && y === 0) return 0;
    if (x > 0 && y > 0) return 2;
    if (x > 0 && y < 0) return 1;
    if (x <= 0 && y >= 0) return 3;
    if (x <= 0 && y <= 0) return 4;
  }

  // TODO hover数据


  // 事件绑定
  mousemove(e) {
    let [x, y] = [e.offsetX, e.offsetY];
    // console.log(x, y);
  }

  mouseClick(e) {
    // console.log('mouseClick', e.offsetX, e.offsetY);
  }

  mouseleave(e) {
    // console.log('mouseleave', e.offsetX, e.offsetY);
  }

  mouseout(e) {
    // console.log('mouseout');
  }

  mouseenter(e) {
    // console.log('mouseenter');
  }

  mouseover(e) {
    // console.log('mouseover');
  }
}
